<template>
  <div class="hotel-info" v-for="item in hotelInfo" :key="item.id">
    <div class="avatar">
      <van-image class="img" :src="`${fileUrl}/${item.productImage}`" />
    </div>
    <div class="desc">
      <p class="title">{{ item.ticketName }}</p>
      <div class="tab_list">
        <div class="salesVolume tab">月售{{ getSalesVolume(item?.sellCount) }}
          <span v-if="(item?.sellCount > 100)"></span>
        </div>
        <span class="tab label" v-for="item in stringToArray(item.labels)" :key="item">
          {{ item }}
        </span>
        <div
          class="instructions tab"
          v-if="item.ticketsDetailsVoList?.length > 0 || item.refundType === '0' || item.productDetail"
        >
          <div v-if="item.refundType === '0'" class="cancel">
            <span>不可取消</span>
            <div class="line"></div>
          </div>
          <span @click="handelshowBottom(item)">
            使用须知 >
          </span>
        </div>
      </div>
    </div>
    <div class="footer">
      <span class="old-price">￥{{ item.unitPriceStandard }}</span>
      <span class="text-orange blod">￥</span>
      <span class="text-orange now-price">{{ item.marketPrice }}</span>
      <span class="text-orange mr10">起</span>
      <van-button style="width: 10rem" type="primary" size="small" @click="handelstock(item)">立即囤券</van-button>
    </div>

  </div>
  <van-popup teleport="body" v-model:show="ydvalue" round position="bottom" :style="{ 'max-height': '70%' }">
    <BookingPolicy
      :ticketsDetailsVoList="commodityInfo.ticketsDetailsVoList"
      :price="commodityInfo.marketPrice"
      :refundType="commodityInfo.refundType"
      :isShowBook="true"
      :productDetail="commodityInfo.productDetail"
      type="hotel"
      @bookingPolicyClose="bookingPolicyClose"
      @bookingPolicyBookIng="bookingPolicyBookIng"
    />
    </van-popup>
</template>
<script setup>
import { ref } from "vue";
import { defineProps } from "vue";
import { useRouter } from "vue-router"
import api from "@/api/index.js";
import HotelCart from "@/components/hotel-card/HotelCart.vue";
import { getSalesVolume } from "@/utils/index.js"
import BookingPolicy from "@/components/booking-policy/BookingPolicy.vue";
const fileUrl = import.meta.env.VITE_FILE_URL;

const router = useRouter()
const props = defineProps({
  hotelInfo: Object,
});
const ydvalue = ref(false);


const handelstock = (item) => {
  // router.push({ path: `/Hotelorder` })
  router.push({ path: '/Hotelorder', query: { id: item.id, price: item.marketPrice } })
};

const bookingPolicyBookIng = () => {
  router.push({ path: '/Hotelorder', query: { id: commodityInfo.value.id, price: commodityInfo.value.marketPrice } })
}

const commodityInfo = ref(null)
const handelshowBottom = (itemData) => {
  console.log('itemData', itemData)
  commodityInfo.value = itemData
  ydvalue.value = true
};
const bookingPolicyClose = () => {
  ydvalue.value = false
}

const stringToArray = (str) => {
  const list = str?.split(',') ?? []
  return list.filter(item => item)
}

</script>
<style lang="scss" scoped>
:deep(.van-overlay) {
  background-color: #fff !important; // 遮罩层颜色
  backdrop-filter: blur(6px); // 模糊效果
}
.yuding {
  position: absolute;
  width: 100%;
  z-index: 999;
  bottom: 0px;
  background: #ffffff;
}

.yuding>div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 1rem;
}

.yuding>div>span>span {
  margin-right: 1rem;
  color: #ed6316;
  font-weight: 600;
}

.hotel-info {
  margin: 2rem;
  background: #fffffc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 7px 15px 0px rgba(54, 141, 88, 0.05);
}

.avatar {
  display: inline-block;
  width: 100%;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 10px;
  vertical-align: text-top;

  .van-image {
    width: 100%;
    height: 100%;
  }
}

.desc {
  display: inline-block;
  width: 100%;
  vertical-align: text-top;

  .title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
  }

  .tab_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.2rem;
    margin-top: 1rem;
    .tab{
      margin-right: .8rem;
      margin-bottom: .8rem;
    }

    .salesVolume {
      background: rgba(79, 172, 145, 0.1);
      border-radius: .3rem;
      padding: 0 .5rem;
      height: 1.7rem;
      line-height: 1.7rem;
      color: var(--van-primary-color);
      margin-right: .8rem;
    }
    .label{
      padding: 0 .5rem;
      background: rgba(236,227,170,0.45);
      color: #CB9407;
    }

    .instructions {
      display: flex;
      align-items: center;
      color: #999999;
      .cancel{
        display: flex;
        align-items: center;
        .line{
          margin: 0 .5rem;
          width: .1rem;
          height: 1.4rem;
          background: #D9D9D9;
        }
      }
    }
  }

  p {
    margin-top: 6px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #666;

    span {
      border-radius: 5px;
      background-color: #d8f8e5;
      color: #4fac91;
      font-size: 0.75rem;
      margin-top: 8px;
      //padding: 4px 6px;
      margin-right: 8px;

      &:last-child {
        color: #999999;
        background: transparent;
      }
    }
  }
}

.footer {
  margin-top: 10px;
  text-align: right;
  color: #999;
  font-weight: bold;
  border-top: 1px solid #e4e4e4;
  padding-top: 1rem;

  span {
    font-size: 1.4rem;
    vertical-align: sub;
  }

  .old-price {
    text-decoration: line-through;
  }

  .now-price {
    font-size: 2.2rem;
  }
}

</style>